<template>
  <div class="maintain-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#FAFAFA"
              status-color="#FAFAFA"
              style="background: #FAFAFA !important"
              :fixed="true">
    </snackbar>

    <div class="maintain-bodey" v-for="(item,index) in dataArray" :key="index" >
      <div class="maintain-bodey-top">
        <span>店铺：</span>
        <span>{{item.shopName}}</span>
        <span style="float: right">详情</span>
      </div>
      <div class="hengxian"></div>
      <div class="maintain-bodey-middle">
        <span>维修费用：</span>
        <span>￥ {{ item.cost }}</span>
        <div></div>
        <span>维修车牌：</span>
        <span>{{item.plate}}</span>
        <div></div>
        <span>维修日期：</span>
        <span>{{item.date}}</span>
      </div>
      <div class="hengxian"></div>
      <div class="maintain-bodey-button">
        <button style="color: #FA6400;border-color: #FA6400" >拒绝</button>
        <button style="color: #64C367;border-color: #64C367">通过审核</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'maintain',
  data(){
    return {
      dataArray:[
        {
          shopName:"东环卓尔汽车维修店",
          cost:200,
          plate:"桂B 77888",
          date:"2021-2-28"
        },
        {
          shopName:"东环卓尔汽车维修店",
          cost:200,
          plate:"桂B 77888",
          date:"2021-2-28"
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.maintain-layout {
  width: 100%;
  height: 100vh;
  .maintain-bodey {
    width: 94%;
    height: 240px;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
    border-radius: 4px;
    border: 0px solid rgba(222, 222, 222, 0.31);
    display: flex;
    flex-direction: column;
    //margin-left: 4%;
    margin:20px auto;
    .maintain-bodey-top {

      width: 90%;
      margin-left: 5%;
      height: 8vh;
      span {
        font-size: 0.5rem;
        position: relative;
        top: 5vh;

      }
    }
    .hengxian {
      width: 94%;
      margin-left: 3%;
      //margin-right: 14px;
      height: 1px;
      background-color: rgba(201, 201, 201, 0.5);
      margin-top: 10px;
    }
    .maintain-bodey-middle {
      font-size: 0.5rem;
      margin-left: 5%;
      //height: 20vh;
      span {
        display: inline-block;
        margin-top: 15px;
      }
    }
    .maintain-bodey-button {
     text-align: right;
      margin-top: 15px;
      button {
        margin-right: 5%;
        width: 25%;
        height: 5vh;
        border-radius: 6px;
      }
    }

  }


}

</style>
